<template>
  <section>
    <info-box :width="600"
              :visible="visible"
              :top="top"
              :right="right"
              :z-index="zIndex"
              @opened="handleOpened"
              @close="handleClose"
              @closed="handleClosedDialog">
      <!--案件信息-->
      <section class="caseInfo">
        <section v-loading="detailLoading">
          <el-collapse-transition>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>案件上报详情</span>
              </div>
              <div class="text item">
                <template v-if="caseDetail">
                  <section class="command__detail__wrapper">
                    <section class="case__detail_container">
                      <el-row>
                        <el-col :span="24">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                案件号
                              </section>
                              <section class="content">{{ caseDetail.evtCode }}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="24">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                违法、违规信息
                              </section>
                              <section class="content">{{ caseDetail.violationName}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="24">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                案件地点
                              </section>
                              <section class="content">{{caseDetail.evtAddress}}</section>
                            </section>
                          </section>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                举报时间
                              </section>
                              <section class="content">{{caseDetail.reporterTime}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="24">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                案件内容
                              </section>
                              <section class="content">{{caseDetail.evtContent}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="24">
                          <el-button type="danger"
                                     @click="handleSave">一键下派
                          </el-button>
                        </el-col>
                      </el-row>
<!--                      <section class="detail__item_container">-->
<!--                        <section class="item_info_container">-->
<!--                          <section class="item_info_container_title">-->
<!--                            <div class="dian"></div>-->
<!--                            事发现场图片-->
<!--                          </section>-->
<!--                          <section class="content">-->
<!--                            <el-button-->
<!--                              size="mini"-->
<!--                              type="text"-->
<!--                              icon="el-icon-document"-->
<!--                              @click="showImage(caseDetail.attachIds)"-->
<!--                              v-hasPermi="['frontierEvent:event:edit']"-->
<!--                            >查看-->
<!--                            </el-button>-->
<!--                          </section>-->
<!--                        </section>-->
<!--                      </section>-->
                    </section>
                  </section>
                </template>
              </div>
            </el-card>
          </el-collapse-transition>
        </section>
      </section>

      <el-dialog :visible.sync="dialogVisible" title="预览" class="imgss" height="800" z-index="20">
        <viewer :images="imgs">
          <img v-for="src in imgs" :key="src.url" :src="src.url">
        </viewer>
      </el-dialog>
    </info-box>
  </section>
</template>
<script>

  import infoBox from '../components/infoBox'

  import Vue from 'vue'
  import Viewer from 'v-viewer'
  import 'viewerjs/dist/viewer.css'

  Vue.use(Viewer)
  Viewer.setDefaults({
    Options: {
      'inline': false,
      'button': true,
      'navbar': true,
      'title': true,
      'toolbar': true,
      'tooltip': true,
      'movable': true,
      'zoomable': true,
      'rotatable': true,
      'scalable': true,
      'transition': true,
      'fullscreen': true,
      'keyboard': true,
      'url': 'data-source',
      'zIndexInline': 9999
    }
  })
  export default {
    name: 'command-case-bar',
    components: { infoBox },
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    computed: {},
    watch: {},
    mounted() {
    },
    data() {
      return {
        // 案件基本信息
        caseDetail: {},
        detailLoading: false,
        dialogVisible:false,
        violationOptions:[],
        top:55,
        right:5,
        zIndex:2000,
        imgs: [
          {
            url: 'http://192.168.20.113:8080/files/view?id=60b0996d78098f1deff7465c',
            title: '图片1'
          },
          {
            url: 'http://192.168.20.113:8080/files/view?id=60b0996d78098f1deff7465c',
            title: '图片2'
          }
        ],
        fileUrl: process.env.VUE_APP_BASE_API + '/files/view?id=', // 上传的图片服务器地址,
      }
    },
    methods: {
      showImage(attachIds) {
        this.imgs = []
        const _this = this
        if (attachIds && attachIds.length > 0) {
          attachIds.forEach(item => {
            this.imgs.push({
              url: _this.fileUrl + item.fileId,
              title: item.fileName
            })
          })
          this.dialogVisible = true
          // this.$viewer.show()
        }
      },
      handleOpened() {
      },
      handleClosedDialog() {
        // this.detail = null
      },
      handleClose() {
        this.$emit('close')
      },
      handleShowCaseInfo(data) {
        this.caseDetail = data.item
      },
      handleSave(){
        this.$emit('runApp',this.caseDetail)
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '../style/main';
  .case__detail_container {
    max-height: 368px;
  }
</style>
